<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="no-js">
<head th:include="admin/index::manage_head">
</head>

<body>
<div class="navbar navbar-fixed-top" th:include="admin/index::manage_title"></div>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2" id="sidebar" th:include="admin/index::manage_sidebar"></div>
        <!--内容-->
        <div class="span10" >
            <div class="row-fluid">
                <div class="navbar">
                    <div class="navbar-inner">
                        <ul class="breadcrumb">
                            <i class="icon-chevron-left hide-sidebar"><a href='#' title="Hide Sidebar" rel='tooltip'>&nbsp;</a></i>
                            <i class="icon-chevron-right show-sidebar" style="display:none;"><a href='#' title="Show Sidebar" rel='tooltip'>&nbsp;</a></i>
                            <li>
                                <a href="/">首页</a><span class="divider">/</span>
                            </li>
                            <li>
                                <a href="#" th:text="${pageName}" th:href="@{/admin/edit_article}">设置</a> <span class="divider">/</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <!-- block -->
                <div class="block">
                    <div class="navbar navbar-inner block-header">
                        <div class="muted pull-left">编辑器</div>
                    </div>
                    <div class="block-content collapse in">
                        <div class="span12">
                            <form id="article_form" class="form-horizontal" th:action="@{/article/submit}" method="post" enctype="multipart/form-data">
                                <fieldset>
                                    <!--<legend>Form Components</legend>-->
                                    <input type="hidden" name="aid" />
                                    <input type="hidden" name="authorid" th:value="'1'"/>
                                    <input type="hidden" name="createtime" th:value="${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd')}"/>
                                    <input type="hidden" name="viewcount" th:value="0" />
                                    <input type="hidden" name="goodcount" th:value="0"/>
                                    <input type="hidden" name="state" th:value="2"/>
                                    <div class="control-group">
                                        <label class="control-label">文章标题：</label>
                                        <div class="controls">
                                            <input name="title" type="text" class="span6" id="typeahead" />
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">摘要：</label>
                                        <div class="controls">
                                            <input name="abstracts" type="text" class="span6" />
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">封面上传：</label>
                                        <div class="controls">
                                            <input name="file" class="input-file uniform_on" id="fileInput" type="file">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">文章归类：</label>
                                        <div class="controls">
                                            <select id="select01" class="chzn-select chzn-done" name="tagid">
                                                <option th:each="tag:${tagList}" th:text="${tag.taglabel}" th:value="${tag.tid}"></option>
                                            </select>
                                        </div>
                                    </div>
                                    <!--文章内容编辑-->
                                    <div class="control-group">
                                        <label class="control-label">文章内容：</label>
                                        <div class="controls">
                                            <div id="div1" class="toolbar"></div>
                                            <div id="div2" class="text"></div>
                                            <textarea id="content" style="visibility: hidden;" rows="1" name="content"></textarea>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">操作内容：</label>
                                        <div class="controls">
                                            <button type="button" class="btn btn-primary" id="html">提交文章</button>
                                            <button type="reset" class="btn btn-warning" id="text" style="margin-left: 3%">重     置</button>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- /block -->
            </div>
        </div>
    </div>
</div>
<div class="container-fluid" style="position: relative;">
    <hr>
    <footer th:include="admin/index::manage_footer" >
        <p>Copyright &copy; 2018-2020.Company name All rights reserved.</p>
    </footer>
</div>
<!--<link href="vendors/datepicker.css" th:href="@{/vendors/datepicker.css}" rel="stylesheet" media="screen">-->
<link href="vendors/uniform.default.css" th:href="@{/vendors/uniform.default.css}" rel="stylesheet" media="screen">
<link href="vendors/chosen.min.css" th:href="@{/vendors/chosen.min.css}" rel="stylesheet" media="screen">

<link href="vendors/wysiwyg/bootstrap-wysihtml5.css" th:href="@{/vendors/wysiwyg/bootstrap-wysihtml5.css}" rel="stylesheet" media="screen">
<!--/.fluid-container-->
<div th:include="admin/index::manage_script"></div>

<script src="vendors/jquery.uniform.min.js" th:src="@{/vendors/jquery.uniform.min.js}"></script>
<script src="vendors/chosen.jquery.min.js" th:src="@{/vendors/chosen.jquery.min.js}"></script>
<script src="vendors/bootstrap-datepicker.js" th:src="@{/vendors/bootstrap-datepicker.js}"></script>

<script src="vendors/wysiwyg/wysihtml5-0.3.0.js" th:src="@{/vendors/wysiwyg/wysihtml5-0.3.0.js}"></script>
<script src="vendors/wysiwyg/bootstrap-wysihtml5.js" th:src="@{/vendors/wysiwyg/bootstrap-wysihtml5.js}"></script>

<script src="vendors/wizard/jquery.bootstrap.wizard.min.js" th:src="@{/vendors/wizard/jquery.bootstrap.wizard.min.js}"></script>
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1',"#div2")
    // 配置服务器端地址     enctype="multipart/form-data"
    editor.customConfig.uploadImgServer = '/upload'
    editor.customConfig.uploadFileName = 'file';
    editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
        },
        success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            $('#div2').attr('style','height:auto;');
        }
    }
    editor.create();
</script>
<script>
    $('#html').click(function() {
        $('#content').html(editor.txt.html());
        $('#article_form').submit();
    })
</script>

</body>

</html>